/* eslint-disable no-unused-vars */
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { Form, Input, Table, Button, Space, Select } from 'antd';
import qs from 'qs';
import Cookies from 'js-cookie';
import { If } from 'babel-plugin-jsx-control-statements';
import { Link } from 'react-router-dom';
import RequestApi from '@/utils/request';
import Print from '@/components/admin-record-prove';
import css from './index.scss';

export default () => {
	const [form] = Form.useForm();
	const [isModalVisible, setIsModalVisible] = useState(false);
	const distinctId = Cookies.get('distinctId');
	const originBody = {
		address: null,
		districtId: distinctId,
		isInImportantBusinessCircle: null,
		manageOrgName: null,
		name: null,
		parkLevel: null,
		parkLotType: null,
		propertyOrgName: null,
		status: null,
	};
	const [body, setBody] = useState(originBody);
	const [data, setData] = useState();
	useEffect(() => {
		RequestApi.connection('post', `parkLot/getManageParkList`, body).then((response) => {
			setData(response.data);
		});
	}, [body]);
	const onFinish = (values) => {
		values.districtId = distinctId;
		setBody(values);
	};

	const reset = () => {
		form.resetFields();
		setBody(originBody);
	};
	const [id, setId] = useState(0);
	const print = (id) => {
		setId(id);
		setIsModalVisible(true);
	};

	const columns = [
		{
			title: '功能列',
			dataIndex: 'id',
			width: 120,
			key: 'id',
			render: (text, record) => {
				return (
					<>
						<If condition={record.status !== 4}>
							<Link
								to={{
									pathname: `/parking-record/check`,
									search: qs.stringify({ id: record.id, value: 1, type: record.type, stage: record.stage }),
								}}
								replace
							>
								详情
							</Link>
						</If>
						<If condition={record.status === 4}>
							<Space>
								<Link
									to={{
										pathname: `/parking-record/check`,
										search: qs.stringify({ id: record.id, value: 1, type: record.type, stage: record.stage }),
									}}
									replace
								>
									详情
								</Link>
								<Button type="link" onClick={() => print(record.id)}>
									打印
								</Button>
							</Space>
						</If>
					</>
				);
			},
		},
		{
			title: '备案管理状态',
			dataIndex: 'status',
			width: 120,
			key: 'status',
			render: (text) => {
				return (
					<>
						<If condition={text === 0}>
							<span>从未备案</span>
						</If>
						<If condition={text === 1}>
							<span>无需备案</span>
						</If>
						<If condition={text === 2}>
							<span>已注销</span>
						</If>
						<If condition={text === 3}>
							<span>已过期</span>
						</If>
						<If condition={text === 4}>
							<span>生效中</span>
						</If>
						<If condition={text === 5}>
							<span>审核中</span>
						</If>
					</>
				);
			},
		},
		{
			title: '停车场名称',
			dataIndex: 'name',
			key: 'name',
			ellipsis: true,
		},
		{
			title: '流水号',
			dataIndex: 'sno',
			width: 150,
			key: 'sno',
			ellipsis: true,
		},
		{
			title: '备案号',
			dataIndex: 'recordNo',
			key: 'recordNo',
			ellipsis: true,
		},
		{
			title: '停车场类型',
			dataIndex: 'parkLotType',
			width: 100,
			key: 'parkLotType',
			ellipsis: true,
			render: (text) => {
				return (
					<>
						<If condition={text === 1}>
							<span>配建</span>
						</If>
						<If condition={text === 2}>
							<span>公共</span>
						</If>
					</>
				);
			},
		},
		{
			title: '停车场等级',
			dataIndex: 'parkLevel',
			width: 100,
			key: 'parkLevel',
			ellipsis: true,
			render: (text) => {
				return (
					<>
						<If condition={text === 0}>
							<span>普通</span>
						</If>
						<If condition={text === 1}>
							<span>特级</span>
						</If>
					</>
				);
			},
		},
		{
			title: '停车场地址',
			ellipsis: true,
			dataIndex: 'address',
			key: 'address',
		},
		{
			title: '所属区域',
			width: 100,
			ellipsis: true,
			dataIndex: 'districtName',
			key: 'districtName',
		},
		{
			title: '规划车位数(个)',
			width: 100,
			ellipsis: true,
			dataIndex: 'planParkCount',
			key: 'planParkCount',
		},
		{
			title: '产权单位',
			ellipsis: true,
			dataIndex: 'propertyOrgName',
			key: 'propertyOrgName',
		},
		{
			title: '管理单位',
			ellipsis: true,
			dataIndex: 'manageOrgName',
			key: 'manageOrgName',
		},
	];

	return (
		<>
			<Form form={form} layout="inline" className={css.table_list_form} onFinish={onFinish}>
				<Form.Item label="备案管理状态" className={css.item} name="status">
					<Select style={{ width: 250 }} allowClear>
						<Select.Option value={0}>从未备案</Select.Option>
						<Select.Option value={1}>无需备案</Select.Option>
						<Select.Option value={2}>已注销</Select.Option>
						<Select.Option value={3}>已过期</Select.Option>
						<Select.Option value={4}>生效中</Select.Option>
						<Select.Option value={5}>审核中</Select.Option>
					</Select>
				</Form.Item>
				<Form.Item label="停车场类型" className={css.item} name="parkLotType">
					<Select style={{ width: 250 }} allowClear>
						<Select.Option value={1}>配建</Select.Option>
						<Select.Option value={2}>公共</Select.Option>
					</Select>
				</Form.Item>
				<Form.Item label="停车场等级" className={css.item} name="parkLevel">
					<Select style={{ width: 250 }} allowClear>
						<Select.Option value={1}>普通</Select.Option>
						<Select.Option value={2}>特级</Select.Option>
					</Select>
				</Form.Item>
				<Form.Item label="重要商圈" className={css.item} name="isInImportantBusinessCircle">
					<Select style={{ width: 250 }} allowClear>
						<Select.Option value={0}>否</Select.Option>
						<Select.Option value={1}>是</Select.Option>
					</Select>
				</Form.Item>
				<Form.Item label="停车场名称" className={css.item} name="name">
					<Input style={{ width: 250 }} />
				</Form.Item>
				<Form.Item label="停车场地址" className={css.item} name="address">
					<Input style={{ width: 250 }} />
				</Form.Item>
				<Form.Item label="管理单位" className={css.item} name="manageOrgName">
					<Input style={{ width: 250 }} />
				</Form.Item>
				<Form.Item label="产权单位" className={css.item} name="propertyOrgName">
					<Input style={{ width: 250 }} />
				</Form.Item>
				<Form.Item className={css.item}>
					<div className={css.button}>
						<Button type="primary" htmlType="submit">
							查询
						</Button>
						<Button onClick={reset}>重置</Button>
						<Button onClick={reset}>导出</Button>
					</div>
				</Form.Item>
			</Form>
			<If condition={data !== null || data !== undefined}>
				<Table
					size="small"
					bordered
					columns={columns}
					scroll={{ x: 2000, y: 'calc(100vh - 290px)' }}
					dataSource={data}
				/>
			</If>
			<If condition={isModalVisible === true}>
				<Print flag id={id} />
			</If>
		</>
	);
};
